---
title: Panel
description: A simple panel layout with header, content, footer and actions.
component: Panel
---

Dashboard panel that uses container queries to adjust its size.

<LiveComponent language="tsx">
{`
  import { Panel, PanelHeader, PanelTitle, PanelContent } from "@pipecat-ai/voice-ui-kit";

  <Panel className="w-full">
    <PanelHeader>
      <PanelTitle>Hello world</PanelTitle>
    </PanelHeader>
    <PanelContent>
      My Panel
    </PanelContent>
  </Panel>
`}
</LiveComponent>

<TypeTable
  className="text-sm"
  type={{
    className: {
      description: "Additional CSS classes to apply",
      type: "string",
      required: false,
      default: "undefined",
    },
  }}
/>

---

## Usage

### Header Variants

<LiveComponent language="tsx">
{`
  import { Panel, PanelHeader, PanelTitle, PanelContent } from "@pipecat-ai/voice-ui-kit";

  <div className="flex flex-col gap-4 w-full">
    <Panel className="flex-1">
      <PanelHeader variant="default">
        <PanelTitle>Default Header</PanelTitle>
      </PanelHeader>
      <PanelContent>Content</PanelContent>
    </Panel>

    <Panel>
      <PanelHeader variant="inline">
        <PanelTitle>Inline Header</PanelTitle>
      </PanelHeader>
      <PanelContent>Content</PanelContent>
    </Panel>
  </div>
`}
</LiveComponent>

### With Buttons

Button components use container queries to adjust their size based on the panel's size.

<LiveComponent language="tsx">
{`
  import { Panel, PanelHeader, PanelTitle, PanelContent, Button, ButtonGroup, ArrowRightIcon } from "@pipecat-ai/voice-ui-kit";

  <Panel className="w-full">
    <PanelHeader>
      <PanelTitle>Actions</PanelTitle>
    </PanelHeader>
    <PanelContent>
      <Button size="lg">I shrink</Button>
      <Button size="xl" isIcon>
        <ArrowRightIcon />
      </Button>
    </PanelContent>
  </Panel>
`}
</LiveComponent>


